<template>
	<view @touchstart="touchStart" @touchend="touchEnd" style="height:2000px;">

		<view class="home">

			<scroll-view auto scroll-x class="navscroll">
				<view class="item" :class="index==navIndex ? 'active' : ''" v-for="(item,index) in navArr"
					@click="clickNav(index,item.id)" :key="item.id">{{item.classname}}</view>
			</scroll-view>

			<view class="content">
				<view>
					<u-notice-bar :text="text1"></u-notice-bar>
				</view>
				<div class="row" v-for="item in newsArr" :key="item.id">
					<newsbox :item="item" @click.native="goDetail(item)"></newsbox>
				</div>
			</view>

			<view class="nodata" v-if="!newsArr.length">
				<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
				</u-empty>
			</view>

			<view class="loading" v-if="newsArr.length">
				<view v-if="loading==1">数据加载中...</view>
				<view v-if="loading==2">没有更多了~~</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				text1: "Hello! 欢迎来到快新闻(quick-news)微信小程序，此项目由\"你看我重名对不队\"团队基于uni-app和uView精心打造而成!",
				navIndex: 0,
				navArr: [],
				newsArr: [],
				currentPage: 1,
				currentId: 51,
				loading: 0, //0默认  1加载中  2没有更多了,
				// 滑动
				touchStartX: 0, // 触屏起始点x  
				touchStartY: 0, // 触屏起始点y  
				id:51
			}
		},
		onLoad() {
			this.getNavData();
			this.getNewsData();
		},
		onReachBottom() {
			console.log("到底部了")
			if (this.loading == 2) {
				return;
			}
			this.currentPage++;
			this.loading = 1;
			this.getNewsData();
		},

		methods: {
			//点击导航切换
			clickNav(index, id) {
				this.id=id
				console.log(index+","+id)
				this.navIndex = index;
				this.currentPage = 1;
				this.currentId = id;
				this.newsArr = []
				this.loading = 0;
				this.getNewsData(id);
			},

			//跳转到详情页
			goDetail(item) {
				uni.navigateTo({
					url: `/pages/detail/detail?cid=${item.classid}&id=${item.id}`
				})
			},

			//获取导航列表数据
			getNavData() {
				uni.request({
					url: "https://ku.qingnian8.com/dataApi/news/navlist.php",
					success: res => {
						console.log(res)
						this.navArr = res.data.splice(1, 5)
						console.log("ddddd")
						console.log(this.navArr)
						console.log("ddddd")
					}
				})
			},

			//获取新闻列表数据
			getNewsData() {
				uni.request({
					url: "https://ku.qingnian8.com/dataApi/news/newslist.php",
					data: {
						cid: this.currentId,
						page: this.currentPage
					},
					success: res => {
						console.log(res)
						if (res.data.length == 0) {
							this.loading = 2
						}
						this.newsArr = [...this.newsArr, ...res.data]

					}
				})
			},
			// 滑动
			/**  
			 * 触摸开始  
			 **/
			touchStart(e) {
				console.log("触摸开始")
				this.touchStartX = e.touches[0].clientX;
				this.touchStartY = e.touches[0].clientY;
			},

			/**  
			 * 触摸结束  
			 **/
			touchEnd(e) {
				console.log("触摸结束")
				let deltaX = e.changedTouches[0].clientX - this.touchStartX;
				let deltaY = e.changedTouches[0].clientY - this.touchStartY;
				if (Math.abs(deltaX) > 50 && Math.abs(deltaX) > Math.abs(deltaY)) {
					if (deltaX >= 0) {
						if(this.navIndex*1>0){
							this.clickNav(this.navIndex=this.navIndex*1-1,this.id=this.id*1-1)
						}
						console.log("左滑")
					} else {
						console.log("右滑")
						console.log(this.navIndex)
						if(this.navIndex*1<4){
							this.clickNav(this.navIndex=this.navIndex*1+1,this.id=this.id*1+1)
						}
					}
				} else if (Math.abs(deltaY) > 50 && Math.abs(deltaX) < Math.abs(deltaY)) {
					if (deltaY < 0) {
						console.log("上滑")
					} else {
						console.log("下滑")
					}
				} else {
					console.log("可能是误触！")
				}
			},

		}
	}
</script>
<style>
	page {
		background-color: #f0edf0;
	}
</style>

<style lang="scss" scoped>
	.navscroll {
		height: 80rpx;
		background: #F7F8FA;
		white-space: nowrap;
		position: fixed;
		top: var(--window-top);
		left: 0;
		z-index: 10;
		padding: 10px 3px;

		/deep/ ::-webkit-scrollbar {
			width: 4px !important;
			height: 1px !important;
			overflow: auto !important;
			background: transparent !important;
			-webkit-appearance: auto !important;
			display: block;
		}

		.item {
			font-size: 40rpx;
			display: inline-block;
			line-height: 80rpx;
			padding: 0 50rpx;
			color: #333;


			&.active {
				color: white;
				background-color: #59ADF8;
				border-radius: 10px;
			}
		}
	}

	.content {
		padding: 10rpx;
		padding-top: 130rpx;

		.row {
			background-color: white;
			border-bottom: 1px dotted #efefef;
			padding: 30rpx 20rpx;
			border: #f5f2f5 solid 2px;
			border-radius: 10px;
			margin-top: 15rpx;
		}
	}

	.nodata {
		display: flex;
		justify-content: center;

		image {
			width: 360rpx;
		}
	}

	.loading {
		text-align: center;
		font-size: 26rpx;
		color: #888;
		line-height: 2em;
	}
</style>